<template>
    <div>
        <div ref="chart" style="height: 500px;"></div>
    </div>
</template>

<script>
  import * as echarts from "echarts";
  export default {
    name: 'Charging',
    components: {  },
    props: {
      order_detail: {
        type: Object
      },
    },
    data() {
      return {
        chart:null,
      };
    },
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.$nextTick(() => {
          this.chart = this.$refs.chart
          const order_detail = this.order_detail
          let proccessList = order_detail.proccessList || []
          let powerList = proccessList.map(item=>item.power)
          let demandVoltage = proccessList.map(item=>item.voltage)
          let demandCurrent = proccessList.map(item=>item.current)
          let capacity = proccessList.map(item=>item.electricQuantity)
          let soc = proccessList.map(item=>item.soc)
          let createTime = proccessList.map(item=>item.createTime)
          var option = {
              title: {
                  text: '充电过程'
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      label: {
                          backgroundColor: '#12d1d9'
                      }
                  }
              },
              legend: {
                  data: ['充电功率', '需求电压', '需求电流', '充电电量', '充电百分比']
              },
              toolbox: {
                  feature: {
                      saveAsImage: {}
                  }
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: [
                  {
                      type: 'category',
                      boundaryGap: false,
                      data: createTime
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                  {
                      name: '充电功率',
                      type: 'line',
                      stack: 'Total',
                      areaStyle: {},
                      emphasis: {
                          focus: 'series'
                      },
                      data: powerList
                  },
                  {
                      name: '需求电压',
                      type: 'line',
                      stack: 'Total',
                      areaStyle: {},
                      emphasis: {
                          focus: 'series'
                      },
                      data: demandVoltage
                  },
                  {
                      name: '需求电流',
                      type: 'line',
                      stack: 'Total',
                      areaStyle: {},
                      emphasis: {
                          focus: 'series'
                      },
                      data: demandCurrent
                  },
                  {
                      name: '充电电量',
                      type: 'line',
                      stack: 'Total',
                      areaStyle: {},
                      emphasis: {
                          focus: 'series'
                      },
                      data: capacity
                  },
                  {
                      name: '充电百分比',
                      type: 'line',
                      stack: 'Total',
                      label: {
                          show: true,
                          position: 'top'
                      },
                      areaStyle: {},
                      emphasis: {
                          focus: 'series'
                      },
                      data: soc
                  }
              ]
          };
          console.log(option)

          const echart = echarts.init(this.chart, "chart");
          echart.setOption(option)
        })
      }
    }
  }
</script>

<style scoped>

</style>
